<template>
  <div class="container bodys">
    <div class="title1">
      <p>购物车{{ nums }}</p>
      <p class="right" @click="sub" v-if="messedg">管理</p>
      <p class="right" v-if="!messedg" @click="sub">完成</p>
    </div>
    <div v-if="lists">

      <div class="shopname">
        <van-checkbox v-if="hide" class="font" v-model="checkedAll" checked-color="#da683c">{{ shopname }}<span>></span>
        </van-checkbox>
      </div>




      <div class="shopping" v-for="(item, index) in lists" :key="index">
        <van-checkbox class="font" v-model="item.checked" checked-color="#da683c">
          <div class="left"><img :src="item.imgs" alt=""></div>
        </van-checkbox>
        <div class="title">
          <p>{{ item.title }}</p>
          <div class="xuanzeqi">{{ item.name }} <span></span></div>

          <div class="prices">
            <span>￥{{ item.price }}.00</span>
            <van-stepper v-model="item.value" />
          </div>

        </div>

      </div>
    </div>


    <div class="bottoms">
      <div class="left">
        <van-checkbox class="font" v-model="checkedAll" checked-color="#da683c">全选</van-checkbox>
      </div>
      <p class="pric" v-if="messedg"><span>合计</span>￥{{ total }}</p>
      <div class="right" @click="add" v-if="messedg">结算({{ nums }})</div>
      <div class="right" @click="del" v-if="!messedg">删除({{ nums }})</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shopname: '新华书店官方旗舰店',
      messedg: true,
      hide: true,
      lists: [
        {
          id: 1,
          imgs: require("../assets/img/paihangbang01.jpg"),
          checked: false,
          value: 1,
          title: window.localStorage.getItem("title"),
          name: window.localStorage.getItem("name"),
          price: window.localStorage.getItem("price"),
        },
        {
          id: 2,

          imgs: require("../assets/img/paihangbang01.jpg"),
          checked: false,
          value: 1,
          title: window.localStorage.getItem("title"),
          name: window.localStorage.getItem("name"),
          price: window.localStorage.getItem("price"),
        },
      ],

    };
  },
  created() {
    let { index } = this.$route.query;
    this.index = index;
    console.log(this.index.v[0]);
    this.lists.push({
      id: 1,
      imgs: this.index.v[0].imgUrl,
      checked: false,
      value: 1,
      title: window.localStorage.getItem("title"),
      name: this.index.v[0].name,
      price: window.localStorage.getItem("price"),
    })
  },
  methods: {
    add() {
      this.$toast("支付完成");
      this.lists.forEach((item) => {
        item.checked = false
      })
    },
    sub() {
      this.messedg = !this.messedg;

    },
    del() {
      this.$notify('删除完成');
      this.lists.forEach((item, index) => {
        if (item.checked) {
          this.lists.splice(index, this.nums)
        }
      })
      if(this.lists.length ==0){
        this.hide = !this.hide
      }

    },


  },
  computed: {
    // 计算总价格
    total: function () {
      return this.lists.reduce(function (total, item) {
        if (item.checked) {
          return total += item.price * item.value;
        } else {
          return total;
        }
      }, 0)
    },
    //全选
    checkedAll: {
      get() {
        console.log("----get----");
        return this.lists.every(item => {
          return item.checked;//只要有一个false不满足条件
        })
      },
      set(value) {
        console.log("----set----");
        console.log(value);
        this.lists.forEach(item => {
          item.checked = value
        })
      }
    },
    // 数量
    nums: function () {
      var num = this.lists.reduce((count, item) => item.checked ? ++count : count, 0);
      return num;
    }

  }
}
</script>

<style lang="scss">
.bodys {
  background-color: #ecedee;
}

.title1 {
  height: 44px;
  line-height: 44px;
  padding: 0 15px;
  display: flex;
  background-color: #fff;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 700;

  .right {
    color: #989ca1;
    font-weight: normal;
  }
}

.shopname {
  height: 54px;
  line-height: 54px;

  background-color: #Fff;
  margin: 10px 0 3px 0;
  display: flex;
  align-items: center;
  padding: 0 10px;

  .font {
    font-size: 15px;
    font-weight: 700;
  }
}

.shopping {
  background-color: #fff;
  height: 150px;
  display: flex;
  padding: 0 10px;

  .font {
    height: 150px;

    .left {
      width: 75px;
      height: 75px;
    }
  }

  .title {
    padding: 30px 10px 0 10px;
    color: #202b38;
    font-size: 15px;
    display: flex;
    flex-direction: column;

    p {
      width: 203px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .xuanzeqi {
      width: 110px;
      height: 27px;
      line-height: 27px;
      background-color: #f4f5f5;
      text-align: center;
      color: #b2b6bd;
      font-size: 14px;
      margin-top: 10px;

      span {
        background: url(../assets/img/40向下、展开.png)no-repeat center center;
        background-size: 100%;
        padding: 8px 8px;
      }
    }

    .prices {
      margin-top: 15px;
      display: flex;
      justify-content: space-between;
      color: #ec6230;
    }
  }
}

.bottoms {
  width: 100%;
  height: 50px;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #Fff;

  .right {
    width: 150px;
    height: 50px;
    background-color: #ec6230;
    text-align: center;
    line-height: 50px;
    font-size: 17px;
    color: #fed5b8;
  }

  .pric {
    font-size: 14px;
    color: #ec6230;

    span {
      color: #3b4247;
    }
  }
}
</style>